<template>
	<view>
		<view class="top-type-tabs">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#F00"></u-tabs>
		</view>
		<view class="top-type-tabs-block"></view>
		<view class="withdraw-list-box">
			<view class="withdraw-item" v-for="(item,index) in withdrawList" :key="index">
				<view class="top">
					<view class="text">
						<view class="top-item">
							{{ item.remark }}
						</view>
						<view class="time top-item">
							{{ getDateText(item.create_time * 1000) }}
						</view>
					</view>
					<view class="status status1" v-if="item.coin > 0">
						收入
					</view>
					<view class="status status2" v-else>
						支出
					</view>
				</view>
				<view class="bottom">
					<view class="bottom-item"></view>
					<view class="bottom-item"></view>
					<view class="bottom-item price">{{getCoinFuhao(item.coin)}}￥{{(Math.abs(item.coin) / 100).toFixed(2)}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from "../../utils/index.js"
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '收入'
				}, {
					name: '支出'
				}
				],
				current: 0,
				page_index: 0,
				withdrawList: [],
				has_more: true
			}
		},
		onLoad() {
			this.getData()
		},
		onReachBottom() {
			this.getData()
		},
		methods: {
			getDateText(_date){
				return utils.getDateText(_date)
			},
			getCoinFuhao(_coin){
				if (_coin > 0){
					return '+'
				}
				else {
					return '-'
				}
			},
			change(index) {
				this.current = index;
				this.page_index = 0;
				this.has_more = true;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
				this.getData()
			},
			getStatusText(status){
				switch (status){
					case 1:
						return '待审核'
					case 2:
						return '已拒绝'
					case 90:
						return '已审核'
					case 99:
						return '已审核'
					default:
						return '订单结算'
				}
			},
			getData(){
				if (!this.has_more){
					return
				}
				this.page_index++
				let that = this
				this.$api.member.myBalance({page:that.page_index,type:this.current}).then(res => {
					if (that.page_index > 1){
						that.withdrawList = that.withdrawList.concat(res.list)
					}
					else {
						that.withdrawList = res.list
					}
					that.has_more = res.page_info.has_more
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	.top-type-tabs{
		position: fixed;
		width: 100%;
		top: var(--window-top);
	}
	.top-type-tabs-block{
		height: var(--window-top);
	}
	.withdraw-list-box{
		padding: 0 30upx 30upx 30upx;
	}
	.withdraw-item{
		background-color: #FFF;
		margin-top: 30upx;
		padding: 30upx 30upx 0 30upx;
		font-size: 28upx;
		border-radius: 10upx;
		
		.price{
			color: #ff4544;
		}
		.status{
			font-weight: 700;
		}
		.status1{
			color: rgb(255, 160, 68);
		}
		.status2{
			color: rgb(255, 69, 68);
		}
		.status90{
			color: rgb(17, 189, 100);
		}
		.status99{
			color: rgb(17, 189, 100);
		}
		
		.top{
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #EEE;
			padding-bottom: 10upx;
			
			.top-item{
				height: 50upx;
				line-height: 50upx;
			}
			
			.time{
				color: #CCC;
			}
		}
		.bottom{
			display: flex;
			justify-content: space-between;
			
			.bottom-item{
				height: 80upx;
				line-height: 80upx;
			}
		}
	}
</style>
